|
|
Описание HTML
Дизайн WWW
Web-страницы можно создавать несколькими способами
- с нуля или в режиме WYSIWYG (режим непосредственного просмотр) на основе
существующего шаблона.
В последнем случае, впрочем как и в первом, у
вас могут быть проблемы при тестировании созданного документа, так как
сгенерированным ссылкам свойственно ошибаться.
Решить эту проблему может уже не редактор, а
обыкновенная смотрелка WWW или как его называют весьма чудаковато - браузер.
Eсли у вас имеется коллекция картинок, фонов,
маркеров и разделителей, то создание Web-страниц - весьма увлекательное
занятие.
Кроме всего этого, помните, что вам обязательно
понадобится софт для преобразования обычных текстовых файлов в файлы формата
HyperText Markup Language.
Хороший редактор Web-страниц должен с одной стороны
позволять редактировать код HTML, а с другой - просматривать произведенные
таким образом изменения в режиме непосредственного просмотра.
Если вы начинаете с нуля, то вы должны ввести
или импортировать текст в документ, отформатировать абзацы, разместить
картинки. Все картинки и текстовые файлы сохраняются в одном каталоге.
Затем все это хозяйство отправляется к вашему поставщику Internet на его
винчестер.
Ниже приводится описание языка гипертекстовых
документов.
В настоящее время существует масса редакторов
Web-страниц, которые не требуют от вас знаний основ HTML. Но для того,
чтобы профессионально подготавливать гипертекстовые документы, вы должны
знать их внутреннее строение, то есть код документа HTML.
HTML - язык описания гипертекстовых документов
HTML позволяет вам формировать различную гипертекстовую
информацию на основе структурированных документов. Браузер определяет сформированные
ссылки через протокол передачи гипертекста (HTTP) открывает доступ к вашему
документу другим пользователям Internet. Разумеется, для успешной реализации
всего этого необходим софт полностью совместимый с WWW и поддерживающий
HTML. HTML документ - это обычный текстовой файл. Используя, например,
браузер Netscape Navigator вы можете просмотреть результат вашей работы,
просто загрузив в него созданный на основе синтаксиса HTML текстовой файл.
По традиции всех классических руководств по HTML мы приводим самый простой
гипертекстовый документ.
<TITLE>Пример простого HTML документа</TITLE>
<H1>Здесь размещен заголовок первого уровня</H1>
<P>Добро пожаловать в Internet! Здесь будет первый параграф.<P>
<P>Здесь будет второй параграф.<P>
В этом примере мы использовали следующие термины
гипертекста (так называемые тэги):
<TITLE> - тэг,
использующийся для определения заголовка.
<H1> - тэг заголовка.
<P> - тэг метки
параграфа.
В языке описания гипертекстовых документов все
тэги парные. В конечном тэге присутствует слэш, который сообщает браузеру
о завершении. Но! Существует одно исключения из этого правила пар: В природе
не существует тэга </P>.
Важно: В языке HTML нет разницы между
прописными и строчными символами. Не все тэги совместимы с браузерами.
Если браузер не понимает тэг, то он его просто пропускает. Итак, документ
HTML это заголовок:
<html> <head> Заголовок </head> <body> ... и текст ... </body>
с названием:
<head> <title> Название </title> </head>
Название документа
Это не правило, и даже не закон, это факт: Любой
документ HTML имеет название. По названию вашего документа HTML другие
браузеры могут найти информацию. Место для названия всегда определено -
оно находится вверху экрана и отдельно от содержимого документа. Максимальная
длина названия - 40 символов.
Форматирование
Форматирование может быть непосредственным или авторским.
Если вы используете тэг <pre>,
то форматирование считается авторским:
<body> <pre>
Следующие тэги присущи непосредственному форматированию:
<p> - параграф
<hr> - горизонтальная
линия
<br> - обрыв
строки
Заголовки и подзаголовки
Язык HTML позволяет вам работать с 6 уровнями заголовков.
Первый заголовок - самый главный. На него обращается особое внимание. Остальные
заголовки могут быть оформлены, например, жирным шрифтом или прописными
буквами. В HTML первый заголовок обозначается как <H1>:
<Hn>Текст</Hn >
Под n
понимается уровень заголовка, то есть числа 1,
2, 3,
4, 5
или 6. В HTML
первый заголовок может совпадать с названием документа.
Списки Списки подразделяются на ненумерованные:
<ul> <li> Элемент списка </ul>
нумерованные:
<ol> <li> Элемент списка </ol>
c описаниями:
<DL> <DT> Собака (элемент) <DD> Друг человека (описание элемента) </DL>
и вложенные:
<UL> <LI> Примус <OL> <LI> Другой примус ... </OL> <LI> ... </UL>
Выделение текста
Текст в документе HTML может быть выделен одним из
следующих способов:
<cite> - цитата
</cite>
<code> - программный
код </code>
<dfn> - определение
</dfn>
<em> - логический
акцент </em>
<kbd> - ввод
с клавиатуры </kbd>
<samp> - сообщения
компьютера </samp>
<strong> - сильный
акцент </strong>
<var> - переменные
</var>
Один большой параграф
В HTML разбиение на строки не принципиально. Это
означает, что вы можете разбить строки вашего документа в любом его месте.
Связано это с тем, что в гипертекстовом документе идущие подряд отбивки
превращаются в одну. Но! Если отбивка сделана после тэга <P>,
то она учитывается. Если какой-нибудь тэг <H>
игнорируется, то отбивка также учитывается. В остальных случаях браузер
будет пропускать отбивки.
Ссылки
HTML позволяет вам связать текст или картинку с другими
гипертекстовыми документами. Текст, как правило, выделяется цветом или
оформляется подчеркиванием. Для этого используется тэг <A>.
Помните, что после буквы A должен стоять пробел. Чтобы сформировать
ссылку:
Наберите <A
Введите HREF="filename">
Наберите после >
текст гипертекстовой ссылки.
Наберите тэг </A>
Один из вариантов гипертекстовой ссылки может
выглядеть так:
<A HREF="BobAnapa.html">Bob</A>
Здесь слово "Bob" ссылается на документ BobAnapa.html,
образуя гипертекстовую ссылку. Если документ формирующий ссылку находится
в другой директории, то то подобная ссылка называется относительной:
<A HREF="BobAnapa/ВobMoscow.html">Bob</A>
Если вы хотите указать полное имя файла, то вам необходимо
использовать синтаксис UNIX. Ссылки можно формировать на основе так называемого
унифицированного локатора ресурсов, то есть используя следующий синтаксис:
protocol: //hostport/path
Здесь вместо protocol может стоять:
http - любая гипертекстовая
информация
ftp - протокол передачи
файлов
telnet - терминальный
доступ
gopher - "предшественник"
WWW
afs - файловая система
Internet
news - конференции
Usenet
wais - система баз
данных Internet
hostport - адрес
сервера с соответствующим номером порта
path - путь.
Предварительное форматирование текста
Тэг <PRE>
позволяет сформировать текст, оформленный моноширинным шрифтом. Используйте
этот тэг для оформления листингов программ.
Расширенные цитаты
Тэг <BLOCKQUOTE>
позволяет вам включить цитату в уединенный объект.
Адрес
Тэг <ADDRESS>
позволяет сформировать информацию об авторе документа HTML.
Куча слов по поводу форматирования символов
В HTML слова и строки кодируются логическимим и физическими
стилями. Физические стили форматируют текст. Логические стили форматируют
через определение в гипертекстовом документе некоторого значения. Это в
частности означает, что тэг заголовка первого уровня не содержит информации
о размере шрифта и гарнитуре. Поэтому, чтобы изменить символьное форматирование
заголовка вы должны модифицировать заголовок первого уровня. Через логические
(в то числе и символьные) тэги вы можете сформировать согласованный гипертекстовый
документ, то есть определить заголовок первого уровня в качестве только
<H1> (без
информации о гарнитуре шрифта и его кегле).
Логические стили
Ниже мы представляем примеры логических стилей документа
HTML.
<DFN> Определить слово. Как правило, курсив.
<EM> Усилить акцент. Как правило, курсив.
<CITE> Заголовок чего-то большого и хорошего. Курсив.
<CODE> Компьютерный код. Моноширинный шрифт.
<KBD> Текст, введенный с клавиатуры. Моноширинный жирный шрифт.
<SAMP> Сообщение программы. Моноширинный шрифт.
<STRONG> Ну очень важные участки. Жирный шрифт.
<VAR> Замена переменной на число. Курсив.
Физические стили
Гипертекстовый документ может быть оформлен с использованием
следующих стилей:
<B> Полужирный.
<I> Курсив.
<TT> Моноширинный.
Специальные символы
Символы, которые не могут быть введены в текст документа
непосредственно через клавиатуру называются специальными символами. Для
таких символов существуют особые тэги. Четыре символа - знак меньше <,
знак больше >,
амперсанд &
и двойные кавычки "
имеют специальное значение внутри HTML и следовательно не могут быть использованы
в тексте в своем обычном значении. Скобки используются для обозначения
начала и конца HTML тэгов, а амперсанд используется для обозначения так
называемой escape-последовательности. Для использования одного из этих
символов введите одну из следующих escape-последовательностей:
< знак меньше
> знак больше
& амперсанд
" кавычки
Важно: Escape-последовательности чуствительны
к регистру.
Принудительный перевод строки
Тэг <BR>
переводит только одну строку, то есть без дополнительного пробела.
Горизонтальные разделители
Тэг <HR>
формирует горизонтальную линию по всей ширине окна.
Встроенные изображения
Вы можете встраивать в ваш документ картинки. Синтаксис
встроенной картинки следующий:
<IMG SRC=image_URL>
Здесь image_URL
указатель на файл картинки, синтаксис которого совпадает с синтаксисом
ссылки HTML.
|
